<template>
  <div class="settings-container">
    <n-layout>
      <!-- 设置内容 -->
      <n-layout-content class="content">
        <n-card>
          <div class="settings-list">
            <!-- 主题设置 -->
            <div class="setting-item">
              <div class="setting-label">主题设置</div>
              <div class="setting-content">
                <n-radio-group v-model:value="currentTheme" @update:value="handleThemeChange">
                  <n-space>
                    <n-radio value="light">浅色主题</n-radio>
                    <n-radio value="dark">深色主题</n-radio>
                  </n-space>
                </n-radio-group>
              </div>
            </div>
          </div>
        </n-card>
      </n-layout-content>
    </n-layout>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import CacheUtil from '@renderer/util/CacheUtil'
import { Constants } from '@renderer/util/Constants'
import EventBus from '@renderer/util/event/EventBus'
import { Events } from '@renderer/util/event/Events'

const currentTheme = ref('dark')

onMounted(() => {
  const theme = CacheUtil.get<string>(Constants.THEME)
  if (theme) {
    currentTheme.value = theme
  }
})

const handleThemeChange = (theme: string) => {
  CacheUtil.set(Constants.THEME, theme)
  EventBus.emit(Events.SWITCH_THEME, theme)
}

</script>

<style scoped>
.settings-container {
  height: 100vh;
  width: 100vw;
  background-color: var(--n-color);
}

.header {
  height: 64px;
  padding: 0 24px;
  border-bottom: 1px solid var(--n-border-color);
  display: flex;
  align-items: center;
  width: 100%;
}

.content {
  padding: 24px;
  height: 100vh;
  width: 100%;
  overflow: auto;
}

.settings-list {
  max-width: 800px;
  margin-left: 24px;
}

.setting-item {
  display: flex;
  padding: 24px 0;
  border-bottom: 1px solid var(--n-border-color);
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-label {
  width: 200px;
  padding-right: 24px;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.setting-content {
  flex: 1;
  display: flex;
  align-items: center;
}

/* 美化滚动条 */
.content::-webkit-scrollbar {
  width: 8px;
}

.content::-webkit-scrollbar-track {
  background: transparent;
}

.content::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color);
  border-radius: 4px;
}

.content::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-color-hover);
}

/* 调整卡片内边距 */
:deep(.n-card) {
  padding-left: 0;
  padding-right: 0;
}

:deep(.n-card-header) {
  padding-left: 24px;
  padding-right: 24px;
}

:deep(.n-card__content) {
  padding-left: 0;
  padding-right: 0;
}
</style>